<template>
  <div class="app-container">
    <basic-container>
      <el-form :inline="true" :model="searchForm" ref="searchForm">
        <el-form-item>
          <el-select v-model="searchForm.roomId" clearable placeholder="请选择教室">
            <el-option
                v-for="item in roomList"
                :key="item.roomId"
                :label="item.roomName"
                :value="item.roomId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.status" clearable placeholder="请选择状态">
            <el-option
                v-for="item in statusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.typeId" clearable placeholder="请选择用途">
            <el-option
                v-for="item in roomTypeList"
                :key="item.purposeId"
                :label="item.purposeName"
                :value="item.purposeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              v-model="value"
              type="datetimerange"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:00']"
              @change="dataChnage"
              align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">搜 索</el-button>
          <el-button type="default" @click="resetSearch('searchForm')">重 置</el-button>
        </el-form-item>
      </el-form>
      <vxe-table
          border
          resizable
          highlight-hover-row
          show-overflow
          ref="xTable1"
          :data="tableData"
      >
        <vxe-table-column title="操作" show-overflow min-width="80">
          <template v-slot:default="{ row }">
              <!-- 审核通过的才可以准备会议  准备后的才可以会议结算 -->
              <!-- <span style="color: #3aa1ff; cursor: pointer">{{ row.isReady ? "会议结算" : "会议准备" }}</span> -->
              <span @click="toDetails(row)" v-if="row.status === 3" style="color: #3aa1ff; cursor: pointer">{{
                  row.isReady ? "培训结算" : row.mrRecordDtlDto && row.mrRecordDtlDto.length ? '培训准备' : '培训结算' 
                }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column
            field="statusName"
            title="状态"
            show-overflow
            min-width="60"
        ></vxe-table-column>
        <vxe-table-column
            field="roomName"
            title="会议室"
            show-overflow
            min-width="60"
        ></vxe-table-column>
        <vxe-table-column
            field="subject"
            title="会议主题"
            show-overflow
            min-width="150"
        ></vxe-table-column>
        <vxe-table-column
            field="purposeName"
            title="会议类型"
            show-overflow
            min-width="80"
        ></vxe-table-column>
        <vxe-table-column
            field="applicantName"
            title="申请人"
            show-overflow
            min-width="60">
        </vxe-table-column>
        <vxe-table-column
            field="userNumber"
            title="参会人数"
            show-overflow
            min-width="60"
        ></vxe-table-column>
        <vxe-table-column
            title="所需物资"
            show-overflow
            min-width="200"
        >
        <template v-slot:default="{ row }">
          <span v-for="(item, index) in row.mrRecordDtlDto" :key="item.dtlId">
            <span v-if="index + 1 != row.mrRecordDtlDto.length">{{item.materialName}}, &nbsp;</span>
            <span v-else>{{item.materialName}}</span>
          </span>
          </template>
        </vxe-table-column>
        <vxe-table-column
            field="otherRemark"
            title="其他需求"
            show-overflow
            min-width="100"
        ></vxe-table-column>
        <vxe-table-column title="需要物资?" show-overflow min-width="60">
          <template v-slot:default="{ row }">
            <span>{{ row.mrRecordDtlDto && row.mrRecordDtlDto.length ? '是' : '否' }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column title="物资准备?" show-overflow min-width="60">
          <template v-slot:default="{ row }">
            <span>{{ row.isReady ? "是" : "否" }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column title="完成结算?" show-overflow min-width="60">
          <template v-slot:default="{ row }">
            <span>{{ row.status === 7 ? '是' : '否' }}</span>
          </template>
        </vxe-table-column>
        <vxe-table-column
            field="beginDate"
            title="开始时间"
            show-overflow
            min-width="120"
        ></vxe-table-column>
        <vxe-table-column
            field="endDate"
            title="结束时间"
            show-overflow
            min-width="120"
        ></vxe-table-column>
      </vxe-table>
      <vxe-pager
          :loading="loading"
          :current-page="tablePage.page"
          :page-size="tablePage.size"
          :total="tablePage.totalElements"
          background
          @page-change="handlePageChange"
      >
      </vxe-pager>
    </basic-container>
  </div>
</template>

<script>
import api from "@/api/classroom/classroom";
import {mapGetters} from "vuex";

export default {
  name: "reservation-list",
  data() {
    return {
      value: [],
      loading: false,
      tableData: [],
      searchForm: {
        roomId: null,
        status: null,
        typeId: null,
        beginDate: null,
        endDate: null
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              end.setHours(23);
              end.setMinutes(59);
              end.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      statusList: [
        {
          label: '审核中',
          value: 2
        },
        {
          label: '已审核',
          value: 3
        },
        {
          label: '已结算',
          value: 7
        },
      ],
      roomList: [],
      roomTypeList: [],
      removeIds: [],
      tablePage: {
        total: 0,
        page: 1,
        size: 10,
        background: true,
        totalElements: 0,
      },
    };
  },
  created() {
    this.getRoomList();
    this.getReservationList();
    this.getCompList();

  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    getReservationList() {
      const params = {
        beginDate: this.searchForm.beginDate,
        endDate: this.searchForm.endDate,
        roomId: this.searchForm.roomId,
        status: this.searchForm.status,
        typeId: this.searchForm.typeId,
        page: this.tablePage.page,
        size: this.tablePage.size,
      };
      api.querySubscribeRoomList(params, "get").then((res) => {
        this.tableData = res.content;
        this.tablePage.totalElements = res.totalElements;
      });
    },
    // 获取会议室列表
    getRoomList() {
      const params = {
        page: this.tablePage.page,
        size: 1000,
      }
      api.queryClassroomList(params, 'get').then((res) => {
        this.roomList = res.content;
      })
    },
    // 获取教室类型列表
    getCompList() {
      const params = {
        page: this.tablePage.page,
        size: 1000,
      }
      api.queryRoomPurpose(params, 'get').then((res) => {
        this.roomTypeList = res.content;
      })
    },
    // 获取选择日期
    dataChnage(data) {
      this.searchForm.beginDate = data ? data[0] : null;
      this.searchForm.endDate = data ? data[1] : null;
    },
    // 搜索
    search() {
      this.tablePage.page = 1;
      this.getReservationList();
    },
    resetSearch() {
      this.searchForm = {};
      this.getReservationList();
    },
    // 跳转会议准备 会议结算
    toDetails(value) {
      // console.log(value, 'value')
      let path = value.isReady ? '/meetAccounts' : (value.mrRecordDtlDto && value.mrRecordDtlDto.length) ? "/meetPre" : '/meetAccounts';
      this.$router.push({
        path,
        query: {
          data: value.recordId,
        },
      });
    },
    // 分页发生改变事件 totalElements
    handlePageChange({currentPage, pageSize}) {
      this.tablePage.page = currentPage;
      this.tablePage.size = pageSize;
      this.getReservationList();
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
</style>